<template>
  <div class="home-page">
    <el-row v-if="!$emergency" :gutter="10" type="flex" align="stretch">
      <el-col :span="24">
        <Card title="个人待办" :icon="todo" :srcset="todo2x" :count="waitCount">
          <div slot="right">
            <Button type="primary" :loading="loading" @click="refreshClick">刷新</Button>
          </div>
          <table-box ref="backlogTable" no-request :other-filters="otherFilters" :table-height="220" :table-config="tableConfig" @data-change="dataChange" />
        </Card>
      </el-col>
      <el-col v-if="false" :span="12">
        <Card title="通知公告" :icon="marketing" :srcset="marketing2x" style="height:100%">
          <div slot="right">
            <el-button class="btn-more" type="text">
              更多公告
              <svg-icon class="svg-rotate" icon-class="xiangxia-zhankai-line" />
            </el-button>
          </div>
          <List :list="notifiList" />
        </Card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Card from '@/components/Card'
import List from './components/List'
import Button from '@/components/Button'
import todo from '@/assets/index_images/img_todo.png'
import todo2x from '@/assets/index_images/img_todo@2x.png'
import marketing from '@/assets/index_images/img_marketing01.png'
import marketing2x from '@/assets/index_images/img_marketing01@2x.png'
import { putWaitHandleTask } from '@/api/waitHandle'
import { filtersRaw } from '@/utils'
import { mapGetters } from 'vuex'
import { getWorkOrderState } from '@/api/waitHandle'

export default {
  name: 'HomePage',
  components: {
    Card,
    List,
    Button
  },
  data() {
    return {
      loading: false,
      // 通知
      marketing,
      marketing2x,
      // 待办
      todo,
      todo2x,
      notifiList: [ // 通知公告
        {
          text: '青少年系列产品统一85折促销活动的通知',
          dot: true,
          createdAt: '2019-08-13',
          href: 'http://www.baidu.com'
        },
        {
          text: '青少年系列产品统一85折促销活动的通知',
          dot: false,
          createdAt: '2019-08-13',
          href: 'http://www.qq.com'
        },
        {
          text: '青少年系列产品统一85折促销活动的通知',
          dot: false,
          createdAt: '2019-08-13',
          href: 'http://www.sina.com'
        },
        {
          text: '青少年系列产品统一85折促销活动的通知',
          dot: true,
          createdAt: '2019-08-13',
          href: 'http://www.163.com'
        }
      ],

      otherFilters: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/waitHandleTask/page',
        pageFlag: true,
        hideFuncBar: true,
        pageSize: 5,
        sort: 'operateTime',
        order: 'desc',
        tablePage: [5, 10, 20, 30, 50, 100],
        // 表格字段动态配置
        setting: [
          {
            prop: 'taskType',
            width: 100,
            label: '待办类型',
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'BACKLOG_TASK_TYPE'
            }
          },
          {
            prop: 'businessCode',
            label: '工单编号',
            width: 180
          },
          {
            prop: 'urgencyDegree',
            width: 100,
            label: '紧急程度',
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'URGENCY_DEGREE'
            }
          },
          {
            prop: 'sourceSystem',
            width: 80,
            label: '系统'
          },
          {
            prop: 'operator',
            width: 100,
            label: '操作人'
            // formatData: v => `${v.operator}(${v.handler})`
          },
          {
            prop: 'operateContent',
            // width: 160,
            label: '操作内容'
          },
          {
            label: '操作',
            align: 'center',
            width: 100,
            render: (_, row) => {
              const t = []
              // t.push(<Button type='primary' onClick={this.preview.bind(this, row)}>查看</Button>)
              t.push(<Button type='primary' onClick={this.operator.bind(this, row)}>处理</Button>)
              return t
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['accountNo', 'waitCount'])
  },
  watch: {
    accountNo: {
      handler: 'refreshClick',
      immediate: true
    }
  },
  created() {
    this.otherFilters = [filtersRaw('state', 0, '='), filtersRaw('handler', this.accountNo, '=')]
  },
  methods: {
    refreshClick() {
      if (!this.accountNo) {
        return
      }
      this.loading = true
      this.otherFilters = [filtersRaw('state', 0, '='), filtersRaw('handler', this.accountNo, '=')]
      this.$nextTick(() => {
        this.$refs.backlogTable.initTableData()
        // 当请求失败
        clearTimeout(() => {
          this.loading = false
        }, 1000)
      })
    },
    // 处理
    async operator(row) {
      // this.$msgbox({
      //   title: '提示',
      //   message: '确认处理该工单吗？',
      //   showCancelButton: true,
      //   type: 'warning'
      // }).then(() => {
      //   putWaitHandleTask({
      //     id: row.id,
      //     state: 1
      //   }).then(res => {
      //     this.$message.success('处理成功！')
      //     this.refreshClick()
      //     this.$router.push({ name: 'DisposeOrderDetails', query: { id: row.businessId }})
      //     // this.$router.push({ name: 'DisposeOrderDetails', query: { id: 'f5069e4c-665b-4cc4-bb7d-7dc27cadaf19' }})
      //   })
      // })
      // row.state 0 待处理 1已处理

      const workOrderState = await this.getWorkOrderState(row.businessId) // 工单状态:0保存1接收2处理中3完结

      putWaitHandleTask({
        id: row.id,
        state: 1
      }).then(res => {
        this.$message.success('处理成功！')
        this.refreshClick()
        // 工单状态为0时 跳到创建页面
        if (workOrderState === 0) this.$router.push({ name: 'CreateOrder', query: { id: row.businessId, state: 0, type: 'edit' }})
        else this.$router.push({ name: 'DisposeOrderDetails', query: { id: row.businessId }})

        // this.$router.push({ name: 'DisposeOrderDetails', query: { id: 'f5069e4c-665b-4cc4-bb7d-7dc27cadaf19' }})
      })
    },
    // 查看
    preview(row) {
      this.$router.push({ name: 'QueryOrderDetails', query: { workOrderNo: row.businessCode, form: 'telRecord' }})
    },
    // 表格数据发生变化
    dataChange(data) {
      this.loading = false
    },
    async  getWorkOrderState(id) {
      const { success, data } = await getWorkOrderState(id)

      if (success === 1 && data) {
        return data.workOrderState
      }
    }
  }
}
</script>
<style lang='scss' scoped>
@import "@/styles/btn.scss";
.home-page{
    .btn-more{
        color: #888;
        font-size: 14px;
        padding: 0;
        .svg-rotate{
            transform: rotateZ(-90deg);
            color: #888;
            width: 18px;
            height: 18px;
            margin-right: 4px;
            vertical-align: text-bottom;
        }
    }
    [class*="table-button-box"]{
        [class*="el-button"]{
            padding: 0 !important;
        }
    }
}
</style>
